<!-- my follow class -->
<template>
    <div id="myDynamic">
      <div class="title">
        关注的课程
      </div>
      <div class="class">
        <ul class="user-items">
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">所属学科分类：<span>是真的钱dddddddddddddddddddddddddddddddddddddddddd</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">关注人数：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button not-follow">+关注</p>
            </div>
          </li>
          <li class="user-item">
            <div class="user-info">
              <div class="user-about">
                <p class="username">淋花吧</p>
                <p class="user-introduce">个人介绍：<span>是真的钱</span></p>
              </div>
            </div>
            <div class="user-related">
              <p class="fans">粉丝：<span>250</span></p>
              <p class="follow-button is-follow">已关注</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'myDynamic',
    mounted () {
    }
  }
</script>

<style scoped>
@import "../../../../../assets/css/classItems.css";

.title {
  height: 60px;
  border-bottom: 1px solid #e0e1e2;
  padding-left: 20px;
  line-height: 60px;
  overflow: hidden;
  color: #71777c;
  font-size: 18px;
}

.user-items {
  background-color: white;
}
.user-item {
  border-bottom: 1px solid #edeeef;
}
  .user-item:hover {
    border: 1px solid transparent;
    border-bottom: 1px solid #edeeef;
  }


.class .user-items .user-item .username {
  font-size: 17px;
}
.class .user-items .user-item .user-introduce{
  font-size: 14px;
}

.class .user-items .user-item .user-related .fans {
  font-size: 16px;
}

/* 关注 */
.user-items .user-item .user-related .follow-button {
  width: fit-content;
  height: 25px;
  margin: 7.5px 80px;
  font-size: 12px;
  padding: 0 5px;
  line-height: 25px;
}
</style>
